<template>
    <div class="wrapper">
        <div style="width: 350px;height: 300px;margin: 200px auto;padding: 20px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 10px;">
            <el-form label-width="auto" label-position="right" status-icon :model="user" :rules="rules" ref="userForm" :hide-required-asterisk="true">
                <div style="margin: 20px 0;text-align: center;font-size: 25px "><b>登 录</b></div>
                <el-form-item label="账号" prop="username" >
                    <el-input type="text" v-model="user.username" prefix-icon="el-icon-user-solid"
                              placeholder="请输入账号" auto-complete="on"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user.password" prefix-icon="el-icon-lock"
                              show-password
                              placeholder="请输入密码" auto-complete="on" @keyup.enter.native="login"></el-input>
                </el-form-item>
                <div style="text-align: right">
                    <el-button type="success" @click="login">登录</el-button>
                    <el-button type="primary" @click="$router.push('/register') ">注册<!--<router-link to="/register" style="text-decoration-line: none;color: white">注册</router-link>--></el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {setRoutes} from "../router";

    export default {
        name: "LoginView",
        data() {
            return {
                user: {},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ]
                },
            }
        },

        methods: {
            login() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {
                        this.request.post("/users/login", this.user).then(res => {
                            if (res.code==='200') {
                                localStorage.setItem("user",JSON.stringify(res.data));
                                localStorage.setItem("menus",JSON.stringify(res.data.menus));
                                if (res.data.role === 'ROLE_STUDENT') {
                                    this.$router.push("/front/home");//前台
                                } else {
                                    this.$router.push("/");//进入主页面
                                }
                                setRoutes();//动态设置当前用户路由
                            } else {
                                this.$message.error("用户名或密码错误");
                            }
                        });
                    }
                });
            },

        }
    }
</script>

<style scoped>
    .wrapper {
        height: 100vh;
        background-image: linear-gradient(to bottom right, #ff81f3, #07fffc);
        overflow: hidden;
    }
</style>